import React from 'react'
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
} from '@ant-design/icons';
import './index.css'
import { useDispatch } from 'react-redux'
import { collapseMenu } from '../../store/reducers/tab'
import { useNavigate } from 'react-router-dom';
import { Button, Layout, Avatar, Dropdown } from 'antd';

const { Header } = Layout;



export default function CommonHeader({ isCollapse }) {

    const navigate = useNavigate()
    const dispatch = useDispatch()
    // 登出
    const logout = () => {
        localStorage.removeItem('token')
        navigate('/login')
    }

    const items = [
        {
            key: '1',
            label: (
                <a target="_blank" rel="noopener noreferrer">
                    个人中心
                </a>
            ),
        },
        {
            key: '2',
            label: (
                <a onClick={() => logout()} target="_blank" rel="noopener noreferrer">
                    退出
                </a>
            ),
        },
    ];

    const setCollapsed = () => {
        dispatch(collapseMenu())
    }


    return (
        <Header className='header-container'>
            <Button
                type="text"
                icon={<MenuFoldOutlined />}
                style={{
                    fontSize: '16px',
                    width: 64,
                    height: 32,
                    backgroundColor: 'white'
                }}
                onClick={setCollapsed}
            />
            <Dropdown menu={{ items }}>
                <Avatar size={36} src={<img src={require('../../assets/images/user.png')} alt='' />} />
            </Dropdown>
        </Header>
    )
}
